/** * @description: 五困生谈话 */
<template>
  <div class="floor">
    <van-collapse v-model="activeNames">
      <!--行为困阻  -->
      <van-collapse-item name="1">
        <template #title>
          <div class="slot-title">
            <span>行为受阻</span>
            <label>学生谈心谈谈话 10/20</label>
          </div>
        </template>
        <div class="stu-msg">
          <p>
            <label>李</label>
            <span class="name">李里</span>
            <span class="stu-no">12312314564</span>
          </p>
          <span class="no-deal">未处理</span>
        </div>
        <div class="stu-msg">
          <p>
            <label>李</label>
            <span class="name">李里</span>
            <span class="stu-no">12312314564</span>
          </p>
          <span class="no-deal">未处理</span>
        </div>
      </van-collapse-item>
      <van-collapse-item name="2">
        <template #title>
          <div class="slot-title">
            <span>行为受阻</span>
            <label>学生谈心谈谈话 10/20</label>
          </div>
        </template>
        <div class="stu-msg">
          <p>
            <label>李</label>
            <span class="name">李里</span>
            <span class="stu-no">12312314564</span>
          </p>
          <span class="no-deal">未处理</span>
        </div>
        <div class="stu-msg">
          <p>
            <label>李</label>
            <span class="name">李里</span>
            <span class="stu-no">12312314564</span>
          </p>
          <span class="no-deal">未处理</span>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  name: 'FiveHardTalk',
  data() {
    return {
      activeNames: ['0'],
    }
  },
}
</script>

<style lang="scss" scoped>
.floor {
  margin-top: 12px;
  background: #fff;
  .slot-title {
    height: 50px;
    line-height: 50px;
    span {
      font-size: $fz16;
    }
    label {
      font-size: $fz13;
      color: #97979f;
      margin-left: 10px;
    }
  }
  .stu-msg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    padding-bottom: 15px;
    p {
      label {
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        font-size: $fz12;
        color: #fff;
        background: #2e6cf6;
        border-radius: 50%;
      }
      .name {
        font-size: $fz16;
        color: $color-title;
        margin-left: 12px;
      }
      .stu-no {
        font-size: $fz13;
        color: #565656;
        margin-left: 8px;
      }
    }
    .no-deal {
      width: 44px;
      height: 18px;
      font-size: $fz12;
      text-align: center;
      color: #ff3c3c;
      background: #ffdfdf;
    }
  }
  .stu-msg + .stu-msg {
    border-top: 1px solid #e7eaf0;
  }
}
</style>
